<template>
	<view class="pagesContent">
		<view class="topView">
			<view class="navstatus"> </view>
			<view class="header">首页 </view>
			<view class="numberAnimation">
				<view class="left">
					<zmxy-number-roller :number="99" size="55" />
				</view>
				<view class="zhang"> <text style="font-size: 57.69rpx;">+</text> <br /> 张 </view>
			</view>
			<view class="allBtnView" @click="allboxClick(all_picture)"> 一键扫描 </view>
		</view>
		<view class="prompt">
			<view class="left">
				<image class="icon" src="../../static/images/homeHintIcon.png" mode=""></image>
			</view>
			<view class="right">提示：数据越早尝试修复，越容易找回！</view>
		</view>
		<view class="list_box">
			<uni-row>
				<uni-col :span="12" class="itemSpan" v-for="(item,index) in list_box" :key="item.title">
					<view class="item" @click="listItemClick(item, index)"
						:style="{ 'background-image':'url('+item.bg+')'}">
						<image class="icon" :src="item.icon" mode=""></image>
						<view class="subTitle">{{ item.title }} </view>
						<view class="message">{{ item.message }} </view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="list_box2">
			<view class="item" v-for="(item,index) in list_box2" :key="item.title">
				<view class="title">
					<image class="icon" :src="item.icon" mode=""></image>
					<view class="name">{{item.title}} </view>
				</view>
				<view class="" style="clear: both;"> </view>
				<view class="content">
					<uni-row>
						<uni-col :span="12" class="itemSpan" v-for="(item,index) in item.list" :key="item.title">
							<view class="item" @click="listItemClick(item, index)"
								:style="{ 'background-image':'url('+item.bg+')'}">
								<view class="iconView">
									<image class="icon" :src="item.icon" mode=""></image>
								</view>
								<view class="subTitle">{{ item.title }} </view>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
		<view style=" height: 20rpx;"> </view>
		<adView></adView>
		<!-- <view class="" style="height: 200rpx;"> </view> -->
		<repData ref="repDataView"></repData>
		<openServer ref="openServer" @goSHouQuan="goSHouQuan"></openServer>


	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {

				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				isMaskClick: true,
				moreAppAuthorization: false,
				all_picture: {
					message: "",
					title: "一键扫描所有图片",
					options: "all",
					type: "ALL_PICTURE",
					scanOption: "scan",
					href: "/pages/files/index"
				},
				list_box: [{
					icon: "../../static/images/icon_list_box_2.png",
					bg: "../../static/images/icon_list_bg_2.png",
					title: "图片恢复",
					message: "深度扫描一键还原",
					options: "all",
					type: "ALL_PICTURE",
					scanOption: "scan",
					href: "/pages/files/accredit"

				}, {
					icon: "../../static/images/icon_list_box_3.png",
					bg: "../../static/images/icon_list_bg_3.png",
					title: "手机视频",
					message: "视频数据一键找回",
					options: "all",
					type: "ALL_VIDEO",
					scanOption: "scan",
					href: "/pages/files/accredit"

				}, ],

				list_box2: [{
						title: "微信恢复",
						icon: "../../static/images/wxIcon.png",
						bg: "",
						list: [{
								icon: "../../static/images/wx_p.png",
								bg: "../../static/images/wx_p_bg.png",
								title: "微信照片恢复",
								message: "",
								options: "wechat",
								type: "PICTURE",
								scanOption: "scan",
								href: "/pages/files/accredit"
							},
							{
								icon: "../../static/images/wx_v.png",
								bg: "../../static/images/wx_p_bg.png",
								title: "微信视频恢复",
								message: "",
								options: "wechat",
								type: "VIDEO",
								scanOption: "scan",
								href: "/pages/files/accredit"
							},
						]
					},

					{
						title: "QQ恢复",
						icon: "../../static/images/QQicon.png",
						bg: "",
						list: [{
								icon: "../../static/images/qq_p.png",
								bg: "../../static/images/qq_p_bg.png",
								title: "QQ照片恢复",
								message: "",
								options: "qq",
								type: "PICTURE",
								scanOption: "scan",
								href: "/pages/files/accredit"
							},
							{
								icon: "../../static/images/qq_v.png",
								bg: "../../static/images/qq_p_bg.png",
								title: "QQ视频恢复",
								message: "",
								options: "qq",
								type: "VIDEO",
								scanOption: "scan",
								href: "/pages/files/accredit"
							},
						]
					},

				],

				item: "",
				file: null,


				totalList: [], //总数据
				list: [], //分页数据

				page: 1, //当前页数
				pageSize: 5, //每页条数
				total: 0, //总页数
			}
		},
		onShow() {
			this.$nextTick(() => {
				// this.$refs.openServer.popupOpen()
			})
			this.updataAppVipSwitch(true)
			uni.setStorageSync("showHInt", "show") //显示功能使用需知
			uni.setStorageSync("startInitType", "on") //进入扫描界面后开始扫描
			// #ifdef APP			
			this.FileManagerModule.checkUriPermissions()
			// #endif			
			let this_ = this;

			if (!this_.hasLogin) {
				this.goReLaunch("/pages/user/login")
			} else {
				this.commitGetUserInfo();
			}

		},
		computed: {
			...mapGetters(["hasLogin", "appVipSwitch", "userInfo", "osVersion"])
		},

		methods: {
			...mapMutations(["updataAppVipSwitch"]),
			...mapActions(["commitGetUserInfo"]),
			allboxClick(all_picture) {
				this.boxClick(this.all_picture)
			},
			// 授权 
			confirm() {
				this.boxClick(this.all_picture)
			},

			boxClick(item) {
				let this_ = this
				uni.setStorageSync("scanItem", item)
				uni.setStorageSync("scanOption", item.options)
				uni.setStorageSync("scanType", item.type)
				let SQstatus = uni.getStorageSync("SQstatus")
				console.log(SQstatus)
				if (SQstatus) {
					this.goInit(item)
				} else {
					this.$refs.openServer.popupOpen()
				}



			},
			goSHouQuan() {
				let item = uni.getStorageSync("scanItem")
				console.log(item)
				this.goInit(item)

			},

			listItemClick(item, index) {
				let this_ = this
				uni.setStorageSync("scanMessage", JSON.stringify(item))
				uni.setStorageSync("scanOption", item.options)
				uni.setStorageSync("scanType", item.type)
				this.goInit(item)
			},
			listrBoxClick(item, index) {
				uni.setStorageSync("scanMessage", JSON.stringify(item))
				uni.setStorageSync("scanOption", item.options)
				uni.setStorageSync("scanType", item.type)
				this.goPage(item.href, null)
			},
			goInit(item) {
				let this_ = this
				uni.setStorageSync("startInitType", "on")
				// #ifdef APP							
				console.log("FileManagerModule:", this.FileManagerModule)
				this.FileManagerModule.listFileByType(item.options, item.type, (res) => {
					if (res == 'state_initialization_success') {
						this_.goPage("/pages/files/index", null)
					}
				})
				// #endif			
				// #ifdef H5
				this_.goPage("/pages/files/index", null)
				// #endif
			},




		}
	}
</script>
<style>
	page {
		background: linear-gradient(180deg, #E1EBFF 0%, #FAFCFF 100%);
	}
</style>

<style lang="scss" scoped>
	.pagesContent {
		.topView {
			width: 100%;
			height: 634.62rpx;
			background-image: url(../../static/images/homeTopbg.png);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			margin-bottom: 23.08rpx;

			.header {
				height: 84.62rpx;
				line-height: 84.62rpx;
				text-align: center;
				font-size: 30.77rpx;
				color: #ffffff;
				font-weight: 600;

			}

			.numberAnimation {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 265.38rpx;
				height: 123.08rpx;
				margin-left: -132.69rpx;
				margin-top: -61.54rpx;
				// background: red;
				// opacity: 0.3;
				display: flex;

				.left {
					flex: 1;
					height: 123.08rpx;
					font-size: 105.77rpx;
					font-family: DIN Alternate, DIN Alternate;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 123.08rpx;
					text-align: right;

				}

				.zhang {
					float: right;
					width: 76.92rpx;
					height: 123.08rpx;
					line-height: 61.54rpx;
					font-size: 30.77rpx;
					font-weight: 800;
					color: #FFFFFF;
					text-align: center;


				}
			}

			.allBtnView {
				width: 461.54rpx;
				height: 84.62rpx;
				background: #226CFF;
				border-radius: 46.15rpx;
				text-align: center;
				line-height: 84.62rpx;
				font-size: 32.69rpx;
				color: #ffffff;
				position: absolute;
				bottom: 46.15rpx;
				left: 50%;
				margin-left: -230.77rpx;

			}
		}


		.prompt {
			width: 653.85rpx;
			padding-left: 19.23rpx;
			height: 69.23rpx;
			background: #FFFFFF;
			border-radius: 15.38rpx;
			margin: 0 auto 25rpx;
			display: flex;

			.left {
				float: left;
				width: 61.54rpx;
				height: 69.23rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					display: block;
					width: 38.46rpx;
					height: 38.46rpx;
				}
			}

			.right {
				flex: 1;
				height: 69.23rpx;
				line-height: 69.23rpx;
				font-size: 26.92rpx;
				font-weight: 400;
				color: #606060;
			}
		}

		.list_box {
			padding: 0 25rpx;
			margin-bottom: 30.77rpx;

			.itemSpan {
				margin-bottom: 30.77rpx;

				.item {
					margin: 0 auto;
					background: #FFFFFF;
					border-radius: 30.77rpx;
					overflow: hidden;
					width: 323.08rpx;
					height: 269.23rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-position: center center;

					.icon {
						width: 92.31rpx;
						height: 92.31rpx;
						display: block;
						margin: 30.77rpx 0 15.38rpx 30.77rpx;
					}

					.subTitle {
						padding-left: 30.77rpx;
						height: 46.15rpx;
						font-size: 32.69rpx;
						font-weight: 600;
						color: #303030;
						line-height: 46.15rpx;
						margin-bottom: 15.38rpx;
					}

					.message {
						padding-left: 30.77rpx;
						height: 38.46rpx;
						font-size: 26.92rpx;
						font-weight: 400;
						color: #666666;
						line-height: 38.46rpx;
					}
				}

			}
		}

		.list_box2 {
			padding: 0 25rpx;

			.item {
				margin-bottom: 28.85rpx;

				.title {
					height: 46.15rpx;
					margin-bottom: 15.38rpx;

					.icon {
						width: 46.15rpx;
						height: 46.15rpx;
						float: left;
					}

					.name {
						float: left;
						height: 46.15rpx;
						line-height: 46.15rpx;
						font-size: 32.69rpx;
						font-weight: 500;
						color: #303030;
						margin-left: 7.69rpx;
					}
				}

				.content {

					.itemSpan {

						.item {
							width: 323.08rpx;
							height: 117.31rpx;
							background: #FFFFFF;
							border-radius: 30.77rpx;
							background-size: 100% 100%;
							background-repeat: no-repeat;
							background-position: center center;


							.iconView {
								width: 107.69rpx;
								height: 117.31rpx;
								float: left;
								display: flex;
								justify-content: center;
								align-items: center;

								.icon {
									width: 61.54rpx;
									height: 61.54rpx;
									display: block;
								}
							}


							.subTitle {
								float: left;
								height: 117.31rpx;
								line-height: 117.31rpx;
								font-size: 26.92rpx;
								font-weight: 400;
								color: #666666;

							}
						}
					}

				}

			}
		}




	}
</style>